<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="查看位置">
        <el-select @change="setView" v-model="form.location" placeholder="请选择所属位置">
          <el-option v-for="item of location"
                     :key="item.type"
                     :label="item.label"
                     :value="item.type" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-plus" @click="handleAdd">
          添加轮播图
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="所在位置">
        <template slot-scope="{row}">
          {{location[row.location-1].label}}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="图片">
        <template slot-scope="{row}">
          <img width="60" :src="row.image" alt="">
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="danger"
            @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-loading="loading" title="" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="所属位置" :label-width="formLabelWidth">
          <el-select v-model="form.location" placeholder="请选择所属位置">
            <el-option v-for="item of location"
                       :key="item.type"
                       :label="item.label"
                       :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://47.101.57.131:8101/common/api/file/upload2"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="handleAvatarSuccess">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-pagination
      background
      style="margin-top: 20px;"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { addSwiper ,getSwiper,delSwiper} from "@/api/swiper";

export default {
  name: 'SysRoleList',
  data() {
    return {
      tableData:[],
      imageUrl:"",
      form:{
        location:1
      },
      dialogFormVisible:false,
      formLabelWidth:'100px',
      location:[
        {
        label:'首页',
        type:1
      },{
        label:'服务群体',
        type:2
      },{
        label:'专家团队',
        type:3
      },{
        label:'课程介绍',
        type:4
      },{
        label:'新闻资讯',
        type:5
      },{
        label:'最新活动',
        type:6
      },{
        label:'言语科普',
        type:7
      },{
        label:'移动端案例',
        type:8
      }],
      list:[],
      total:0,
      loading:false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getSwiper({
        current:this.current,
        size:10,
        location: this.form.location
      }).then(res=>{
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleAdd(){
      this.dialogFormVisible = true
    },
    handleAvatarSuccess(res){
      const {fileUrl,id} = res.data
      addSwiper({
        "image": fileUrl,
        "location": this.form.location,
        "fileId": id,
        "imageOrder": 1,
      }).then(res=>{
        this.dialogFormVisible = false
        this.$message.success('操作成功！')
        this.getList()
        this.loading = false
      })
    },
    del(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delSwiper({
          id:row.id,
          fileId:row.fileId
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    setView(){
      this.getList()
    },
    beforeUpload(){
      this.loading = true
    },
    currentChange(){
      this.getList()
    }
  }
}
</script>
<style scoped>

</style>
